import React from 'react'
import {Modal,Form,Button,Select,Input} from 'antd';
import * as api from "../api/index"
import {useDispatch,useSelector} from "react-redux"
type Props = {
    isModalVisible:any,
    handleOk:any,
    handleCancel:any
}

const Model = (props: Props) => {
  const dispatch = useDispatch()
    const onFinish = (values: any) => {
        console.log('Success:', values);
        dispatch(api.add_list(values))
      };
    
     
      const { Option } = Select;
      const handleChange = (value:any) => {
        console.log(`selected ${value}`);
        dispatch(api.add_list(value))
      };
  return (
    <div>
         <Modal title="Basic Modal" visible={props.isModalVisible} onOk={props.handleOk} onCancel={props.handleCancel}>
         <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      
      autoComplete="off"
    >
      <Form.Item
        label="Key"
        name="key"
        rules={[{ required: true, message: 'Please input your key!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="姓名"
        name="name"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="年龄"
        name="age"
        rules={[{ required: true, message: 'Please input your age!' }]}
      >
        <Input />
      </Form.Item>
      
      <Form.Item
        label="地址"
        name="city"
        rules={[{ required: true, message: 'Please input your city!' }]}
      >
        <Input />
      </Form.Item>
     

      <Form.Item
        label="状态"
        name="state"
        rules={[{ required: true, message: 'Please input your state!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit" onClick={props.handleOk}>
          确定
        </Button>
      </Form.Item>
    </Form>
  
         </Modal>
    </div>
  )
}

export default Model